import QtQuick 2.0

/// 滑动模块

Rectangle {
    id: container
    width: 400
    height: 50
    color: "transparent"  // 背景白色

    // 超过区间会变黄(这是百分比值)
    property double tipMax: 100
    property double tipMin: 0

    //倍率，本来区间是[0，100],倍率修改后，可以变成[0,5000]
    property double magnification: 1.0

    // 限制区间大小(这是百分比值)
    property double max: 100
    property double min: 0

    property int score: 0
    function set_score(_value)
    {
        r2.width = _value / magnification / 100.0 * r1.width
    }

//////////////////////////////////////////////////////////////////////////////////////////////////////

    // r1 Rectangle - 背景矩形
    Rectangle {
        id: r1
        radius: 8
        width: parent.width * 0.8
        height: parent.height
        color: "white"
        border.color: "#888888"
        border.width: 1
    }

    // r2 Rectangle - 滑动矩形
    Rectangle {
        id: r2
        radius: 8
        width: parent.width * 0.3  // 初始宽度
        height: parent.height
        color: "lightgreen"
        anchors.top: r1.top
        anchors.left: r1.left

        onWidthChanged: {
            // 更新 r2 的覆盖面积
            score = Math.round(r2.width / r1.width * 100) * magnification;
            var tempMaxValue = tipMax * magnification;
            var tempMinValue = tipMin * magnification;

            if(score >= tempMaxValue  || score <= tempMinValue) {
                r2.color = "lightyellow"
            }
            else {
                r2.color = "lightgreen"
            }
        }
    }

    MouseArea {
        id: dragArea
        width: r1.width
        height: r1.height

        function update_width(mouseX)
        {
            var newWidth = Math.max(0, mouseX);  // 根据鼠标位置计算宽度
            newWidth = Math.min(newWidth, (max / 100.0 * r1.width));  // 防止超过限制的宽度
            newWidth = Math.max(newWidth, (min / 100.0 * r1.width));  // 防止超过限制的宽度

            r2.width = newWidth;
        }

        // 计算并更新 r2 的宽度
        onPositionChanged: {
            update_width(mouse.x)
        }

        onClicked: {
            update_width(mouse.x)
        }
    }

    // r3 Rectangle - 显示覆盖面积的文本框
    Rectangle {
        id: r3
        radius: 8
        width: parent.width * 0.2
        height: parent.height
        color: "white"
        anchors.top: r1.top
        anchors.leftMargin: 0
        anchors.topMargin: 0
        border.color: "#888888"
        border.width: 1
        anchors.left: r1.right

        Text {
            id: areaText
            anchors.centerIn: parent
            text: score
            font.pixelSize: 24
            color: "#333333"
        }
    }
}
